<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <el-card class="header-card">
      <div>
        <div class="fl headL">
          <div class="headImg">
            <img :src="require('@/assets/微信图片_20220126160640.jpg')" />
          </div>
           <el-button
              circle
              icon="el-icon-star-off"
              type="primary"
              plain
              size="mini"
              @click="getMessage"
            ></el-button>
          <div class="headInfoTip">
            <p class="firstChild">
              早安，{{ userInfo.username }}，祝你开心每一天!
            </p>
            <p class="lastChild">
              {{ message }}
            </p>
          </div>
        </div>

        <div class="fr" />
      </div>
    </el-card>
    <!-- 主要内容 -->
    <el-row type="flex" justify="space-between">
      <!-- 左侧内容 -->
      <el-col :span="12" style="padding-right: 26px">
        <!-- 工作日历 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>工作日历</span>
          </div>
          <div class="header">
            <work-calendar />
          </div>
          <!-- 放置日历组件 -->
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="12">
        <!-- 绩效指数 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>绩效指数</span>
          </div>
          <!-- 放置雷达图 -->
          <Radar />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WorkCalendar from './work-calendar.vue'
import Radar from './radar.vue'
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  components: { WorkCalendar, Radar },
  data () {
    return {
      message: '芜湖起飞'
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.getMessage()
  },
  methods: {
    async getMessage () {
      try {
        const { data: res } = await axios.get(
          'https://api.uixsj.cn/hitokoto/get?type=social'
        )
        this.message = res
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
}

.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 24px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.header-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

.sideNav,
.sideLink {
  padding: 30px 0 12px;
  .sideBtn {
    padding: 16px 26px;
    font-size: 16px;
    margin: 10px 5px;
  }
}
</style>
